<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="layui/css/layui.css" rel="stylesheet">
<script type="text/javascript" src="layui/layui.js"> </script>
<style type="text/css">

	.anniu{
	 position: absolute;
            text-align: center;
            bottom: 0;
            font-size: 16px;
            color: #FFFFFF;
            margin: 25px 0;
            width: 335px;
            height: 45px;
            line-height: 45px;
            background: #E0E0E0;
            border-radius: 5px;
            background-color: #1B68FD;
            left: 50%;
            transform: translateX(-50%);
	}
</style>
</head>
<body>
	<div style="display:none" id="food">
		<form class="layui-form" action="" id="fromfood" lay-filter="fromf">
		<input name="Id" style="display:none" > 
			<div class="layui-form-item">
				<label class="layui-form-label">姓名</label>
				<div class="layui-input-block">
					<input type="text" name="Name" id="Name" lay-verify="required"
						lay-reqtext="" placeholder="请输入" autocomplete="off"
						class="layui-input">
				</div>
			</div>
	
			<div class="layui-form-item">
				<div class="layui-input-inline">
					<button type="submit" class="layui-btn" lay-submit=""
						lay-filter="addNames">修改</button>
				</div>
			</div>
		</form>
	</div>
	
	<!-- -----------------------------树------------------------------------------------------- -->
	
	<div style="display:none" id="tree_form">
		<form class="layui-form" action="" id="tree" lay-filter="tree">
		
		
			<div class="layui-form-item">
				<div class="layui-input-inline">
					<button type="submit" class="layui-btn" class="anniu" lay-submit=""
						lay-filter="updateTree">保存</button>
				</div>
			</div>
		</form>
	</div>
	<!-- ---------------------------------------END--------------------------------------------- -->
	<div style="display:none" id="roles2">
		<form class="layui-form" action="" id="fromroles2" lay-filter="">
		<input name="Id" style="display:none" > 
			<div class="layui-form-item">
				<label class="layui-form-label">姓名</label>
				<div class="layui-input-block">
					<input type="text" name="Name" id="Name" lay-verify="required"
						lay-reqtext="" placeholder="请输入" autocomplete="off"
						class="layui-input">
				</div>
			</div>
	
			<div class="layui-form-item">
				<div class="layui-input-inline">
					<button type="submit" class="layui-btn" lay-submit=""
						lay-filter="addName">添加</button>
				</div>
			</div>
		</form>
	</div>
	<div class="layui-inline">
				
					<button type="submit" class="layui-btn" lay-submit=""
					lay-filter="add">添加</button>
			</div>
	<table id="demo" lay-filter="test"></table>
<script type="text/html" id="barDemo">
 
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-xs" lay-event="module">分配权限</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
  
<script>
layui.use(['table','form','layer','laydate'],function(){
  var table = layui.table;
  var layer=layui.layer;
  var laydate=layui.laydate;
  var $=layui.$;
  var form=layui.form;
  table.render({
    elem: '#demo'
    ,url: 'getAll' //数据接口
    ,id:'tableTest'
    ,page: true //开启分页
    ,cols: [[ //表头
      {field: 'Id', title: 'ID',}
      ,{field: 'Name', title: '名字'}
      ,{fixed: 'right', title: '编辑' ,width:250, align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器 
      
    ]]
  }); 
  
  	form.on("submit(add)",function(data){
			layer.open({
			type:1,
			content:$("#roles2"),
			area:['600px','600px']
		})
			return false;
	})
  		form.on("submit(addName)",function(data){
  			 $.post("getName", {
				  Name:$("#Name").val()
          }, function(data) {  
              if (data > 0) {
              	layer.msg("角色已经存在");
              } else{
              
              }
          });
			$.post("insertRoles",$("#fromroles2").serialize(),function(res){
				if(res.code=="0"){
				layer.msg("添加成功");
				layer.closeAll();
				table.reload("tableTest");
			}else{
				layer.msg("添加失敗");
				table.reload("tableTest");
			}
				
			},"json")
			return false;
		})
		
  		form.on("submit(addNames)",function(data){
  			 $.post("getName", {
				  Name:$("#Name").val()
          }, function(data) {  
              if (data > 0) {
              	layer.msg("角色已经存在");
              } else{
              
              }
          });
			$.post("updateRoles",$("#fromfood").serialize(),function(res){
				if(res.code=="0"){
				layer.msg("添加成功");
				layer.closeAll();
				table.reload("tableTest");
			}else{
				layer.msg("添加失敗");
				table.reload("tableTest");
			}
				
			},"json")
			return false;
		})
		
		
		    //工具条事件
   	
		  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
			  data = obj.data; //获得当前行数据
			  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			  var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
			 
			 if(layEvent === 'del'){ //删除
			    layer.confirm('真的删除行么', function(index){
			    	 obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
			    	 console.log(obj)
				    	 	 $.post("getId", {
					  
	          }, function(data) {  
	              if (data ==obj.Id) {
	              	layer.msg("不能删除");
	              	layer.closeAll();
						table.reload("tableTest");
	              } else{
	              
	              }
	              });
			      $.post("del",{
			    	  Id:obj.data.Id
			      },function(res){
			    	  if(res.code=="0"){
			    		  layer.msg("删除成功")
			    		  layer.closeAll();
						table.reload("tableTest");
			    		  
			    	  } else{
			    	  	
			    		  layer.msg("删除失败")
			    		   layer.closeAll();
						table.reload("tableTest");
			    	  }
			      },"json")
			        });
			  } else if(layEvent === 'edit'){ //编辑
       form.val("fromf",data)
       layer.open({
       type:1,
       content:$("#food"),
			area:['600px','600px']
       })
       	  
			  } else if(layEvent === 'module'){
			    layer.open({
       type: 2,
            skin: 'layui-layer-demo', //样式类名
            title: '标题',
            closeBtn: 1, //不显示关闭按钮
            anim: 2,
            area: ['893px', '600px'],
            shadeClose: true, //开启遮罩关闭
            content: 'treenode.html'
       })
			  }
			});
	
          
});
		
</script>
</body>
</html>